import React from 'react';

const R = require('ramda');
import {connect} from 'dva';
import {Form, Button, Modal, Tabs, message} from 'antd';
import AccountInfos from '../statement/AccountInfos';
import CostList from '../statement/CostList';
import Submit from '../statement/Submit';

import moment from 'moment';

moment.locale('zh-cn');

const TabPane = Tabs.TabPane;
const FormItem = Form.Item;

export default connect(({lessee}) => ({lessee}))(Form.create({wrappedComponentRef: true})(class CustomerDetail extends React.Component {

        constructor(props) {
            super(props);
            this.state = {
                searchConditions: {},
                open: false,
                disabled: true,
                tabActiveKey: "1",
                cstid: "",
                statementType: "",
                payload: {
                    orderIds: [],
                    forexIds: [],
                    historyAmtIds: [],
                    depositids: [],
                    depositRecordIds: [],
                    orderChargesIds: [],
                    orderChargesStatement: []
                },
                setpTwoDisable: true,

            };
        }


        handleOpen = (disabled, searchConditions, tabActiveKey, cstid) => {
            this.setState({
                open: true, disabled: disabled, searchConditions: searchConditions,
                tabActiveKey: tabActiveKey, cstid: cstid
            });

        }


        handleResetFields = () => {
            this.setState({open: false, cstid: ""})
        }


        valideStaement = () => {

            //历史余额
            let historyAmtIds = this.state.payload.historyAmtIds;
            let historyAmtList = this.props.customerManage.historyAmtList;
            let forex = this.state.statementType == "2" ? this.props.customerManage.statetemntDetail.forex : this.props.customerManage.statetemntDetail.forexs;
            let deposit = this.state.statementType == "2" ? this.props.customerManage.statetemntDetail.deposit : this.props.customerManage.statetemntDetail.deposits;

            if (this.state.statementType == "1") {
                if ((R.isEmpty(historyAmtIds) || R.isNil(historyAmtIds)) && (R.isEmpty(forex) || R.isNil(forex)) && (R.isEmpty(deposit) || R.isNil(deposit))) {
                    return false;
                }

                if ((!R.isEmpty(historyAmtIds) && !R.isNil(historyAmtIds)) && (R.isEmpty(forex) || R.isNil(forex))) {
                    message.info("是否只结算历史余额")
                }
            }

            if (this.state.statementType == "2") {
                let taxRefundFinance = this.props.customerManage.statetemntDetail.taxRefundFinance;
                let depositRecord = this.props.customerManage.statetemntDetail.depositRecord;
                let orderCharge = this.props.customerManage.statetemntDetail.orderCharge;

                if ((R.isEmpty(forex) || R.isNil(forex)) && (R.isEmpty(deposit) || R.isNil(deposit)) &&
                    (R.isEmpty(taxRefundFinance) || R.isNil(taxRefundFinance)) && (R.isEmpty(depositRecord) || R.isNil(depositRecord)) && (R.isEmpty(orderCharge) || R.isNil(orderCharge))
                ) {

                    if ((!R.isEmpty(historyAmtIds) && !R.isNil(historyAmtIds))) {
                        message.info("是否只结算历史余额")
                    } else {
                        return false;
                    }

                }


            }

            return true;

        }

        setSetpTwoDisable = (value) => {
            this.setState({setpTwoDisable: value});
        }

        handleCancel = (flag) => {
            let payload = {
                orderIds: [],
                forexIds: [],
                historyAmtIds: [],
                depositids: [],
                depositRecordIds: [],
                orderChargesIds: [],
                orderChargesStatement: []
            };


            this.handleResetFields();
            if (this.accountInfos) this.accountInfos.handleResetFields();
            if (this.costList) this.costList.handleResetFields();
            if (this.submit) this.submit.handleResetFields();
            this.setState({tabActiveKey: "1", open: false, payload: payload});


        }

        handleChangeTabe = (key) => {
            this.setState({tabActiveKey: key})
        }

        handleBack = () => {
            if (this.state.tabActiveKey == "2") {
                this.props.dispatch({
                    type: 'customerManage/setUnsettleorder',
                    payload: {
                        list: []
                    }
                });

                this.props.dispatch({
                    type: 'customerManage/setStatetemntDetail',
                    payload: {
                        data: {}
                    }
                });
            }
            this.setState({tabActiveKey: (parseInt(this.state.tabActiveKey) - 1) + ""});
        }

        handleNext = () => {

            if (this.state.tabActiveKey === "1" && this.accountInfos.handleConfirm()) {
                if (this.state.statementType == "1") {
                    this.props.dispatch({
                        type: 'customerManage/getStatetemntDetail',
                        payload: {type: this.state.statementType, cstId: this.state.cstid}
                    });
                }
                if (this.state.statementType == "2") {
                    this.props.dispatch({type: 'customerManage/getUnsettleorder', payload: {cstId: this.state.cstid}});
                }

                this.setState({tabActiveKey: (parseInt(this.state.tabActiveKey) + 1) + ""});
            }

            if (this.state.tabActiveKey === "2") {
                //只有历史余额时，可结算
                if (R.isEmpty(this.state.payload.historyAmtIds)) {
                    if (this.state.statementType == "2" && (R.isNil(this.state.payload.orderIds) || R.isEmpty(this.state.payload.orderIds))) {
                        message.info("请选择订单结算");
                        return;
                    }

                    if (this.state.statementType == "1" && (R.isNil(this.state.payload.forexIds) || R.isEmpty(this.state.payload.forexIds))) {
                        message.info("请选择外汇结算");
                        return;
                    }


                }

                //校验是否有结算数据
                if (!this.valideStaement()) {
                    message.info("没有要结算的数据");
                    return;
                }

            }


            if (this.state.tabActiveKey === "2") {
                this.setState({tabActiveKey: (parseInt(this.state.tabActiveKey) + 1) + ""});
            }

        }

        addStatement = () => {
            if (this.submit.handleConfirm()) {
                this.handleCancel();
            }

        }

        setStatementType = (type) => {
            this.state.statementType = type;
        }


        setPayload = (payload) => {
            if (R.isNil(payload)) {
                payload = {
                    orderIds: [],
                    forexIds: [],
                    historyAmtIds: [],
                    depositids: [],
                    depositRecordIds: [],
                    orderChargesIds: [],
                    orderChargesStatement: []
                }
                this.state.payload = payload;

            } else {
                if (!R.isNil(payload.orderIds)) {
                    this.state.payload.orderIds = payload.orderIds;
                }
                if (!R.isNil(payload.forexIds)) {
                    this.state.payload.forexIds = payload.forexIds;
                }
                if (!R.isNil(payload.historyAmtIds)) {
                    this.state.payload.historyAmtIds = payload.historyAmtIds;
                }
                if (!R.isNil(payload.depositids)) {
                    this.state.payload.depositids = payload.depositids;
                }
                if (!R.isNil(payload.depositRecordIds)) {
                    this.state.payload.depositRecordIds = payload.depositRecordIds;
                }
                if (!R.isNil(payload.orderChargesIds)) {
                    this.state.payload.orderChargesIds = payload.orderChargesIds;
                }
                if (!R.isNil(payload.orderChargesStatement)) {
                    this.state.payload.orderChargesStatement = payload.orderChargesStatement;
                }

            }


        }


        render() {

            let footer = [];

            footer.push(<Button key="back" size="large" disabled={this.state.disabled} onClick={this.handleBack.bind(this)}
                                style={{display: this.state.tabActiveKey === "1" ? "none" : "inline-block"}}>上一步</Button>);

            if (this.state.tabActiveKey === "2" && this.state.statementType == "2") {
                footer.push(<Button key="next" size="large" disabled={this.state.setpTwoDisable}
                                    onClick={this.handleNext.bind(this)}
                                    style={{display: this.state.tabActiveKey === "3" ? "none" : "inline-block"}}>下一步</Button>);
            } else {
                footer.push(<Button key="next" size="large" disabled={this.state.disabled}
                                    onClick={this.handleNext.bind(this)}
                                    style={{display: this.state.tabActiveKey === "3" ? "none" : "inline-block"}}>下一步</Button>);

            }

            if (this.state.tabActiveKey === "3") {
                footer.push(<Button key="submit" size="large" disabled={this.state.disabled}
                                    onClick={this.addStatement.bind(this)} style={{display: "inline-block"}}>提交申请</Button>);
            }

            footer.push(<Button key="cancel" size="large" disabled={this.state.disabled}
                                onClick={this.handleCancel.bind(this, true)}>取消</Button>);


            let widths = {
                "1": 900,
                "2": 1000,
                "3": 1000,
                "4": 900,
                "5": 900,
                "6": 900,
                "7": 900,
                "8": 900,
                "9": 900,
                "10": 900
            };


            return (
                <Modal maskClosable={false} footer={this.state.disabled ? null : footer} visible={this.state.open}
                       title={"结算单"} width={widths[this.state.tabActiveKey]} wrapClassName="vertical-center-modal"
                       onCancel={this.handleCancel}>
                    <Tabs activeKey={this.state.tabActiveKey} tabPosition={'left'}
                          onChange={this.handleChangeTabe.bind(this)}>
                        <TabPane tab="账户信息" key="1" disabled={!this.state.disabled}>{<AccountInfos
                            wrappedComponentRef={(inst) => this.accountInfos = inst}
                            cstId={this.state.cstid}
                            dispatch={this.props.dispatch}
                            customerManage={this.props.customerManage}
                            setStatementType={this.setStatementType}
                            dataSource={this.props.dataSource}
                            businessType={this.props.businessType}/>}
                        </TabPane>

                        <TabPane tab="结算费用" key="2" disabled={!this.state.disabled}>{<CostList
                            wrappedComponentRef={(inst) => this.costList = inst}
                            cstId={this.state.cstid}
                            customerManage={this.props.customerManage}
                            dispatch={this.props.dispatch}
                            statementType={this.state.statementType}
                            setPayload={this.setPayload}
                            payload={this.state.payload}
                            setSetpTwoDisable={this.setSetpTwoDisable}
                            dataSource={this.props.dataSource}/>}</TabPane>

                        <TabPane tab="转账信息" key="3"
                                 disabled={!this.state.disabled}>{<Submit
                            wrappedComponentRef={(inst) => this.submit = inst}
                            cstId={this.state.cstid}
                            customerManage={this.props.customerManage}
                            dispatch={this.props.dispatch}
                            statementType={this.state.statementType}
                            payload={this.state.payload}
                            businessType={this.props.businessType}
                            lessee={this.props.lessee}
                        />}
                        </TabPane>


                    </Tabs>
                </Modal>
            );
        }
    })
)


